<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
		<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
		<title>音频转述师</title>
		<link rel="stylesheet" type="text/css" href="css/style.css" />
		<link rel="stylesheet" type="text/css" href="css/aui.css" />
		<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
		<script src="js/art-template.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/aui-pull-refresh.js" type="text/javascript" charset="utf-8"></script>
		<script src="https://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
		<script src="js/wxrem.js" type="text/javascript" charset="utf-8"></script>
		<style>
			
			#tabs div:after{
			    content: "";
			    position: absolute;
			    display: block;
			    width: 0;
			    height: .25rem;
			    background-color: #282828;
			    bottom: 0;
			    left: 50%;
			    transition: all .4s;
			    transform: translate(-50%,0);
			}
			#tabs div.active:after{
				width: 2.5rem;
			}
			em.down img{
				transform:rotateZ(180deg);
			}
			.item{
			    justify-content: space-between;
				padding: 1.1rem 0;
				border-bottom: 1px #e5e5e5 solid;
				display: flex;
			}
			.item b{
				margin-bottom:0.833333rem;
				display: block;
				line-height: 1.833333rem;
				font-size: 1.5rem;
			}
			.item em{
			    display: block;
			    width: 3.666666rem;
			    height: 1.833333rem;
			    border: 1px solid #666;
			    border-radius: 0.549999rem;
			    text-align: center;
			    line-height: 1.833333rem;
			    font-size: 1.166666rem;
			}
			#wpr{
			    color: #666;
			    font-size: 1.25rem;
			    line-height: 1.5rem;
			}
			#wpr .item:nth-last-child(1){
				border: none;
			}
			.back-c {
			    background-position: center center;
			    background-size: contain;
			    background-repeat: no-repeat;
			}
			.p-r{
				position: relative;
				line-height: 33px;
			}
			.left span{
				float: left;
				width: 3.33rem;
				height: 3.33rem;
				display: inline;
				margin-right: .83rem;
				border-radius: 50%;
				background-position: center center;
			    background-size: contain;
			    background-repeat: no-repeat;
			}
			.buy{
			    float: right;
			    width: 7.083333rem;
			    line-height: 2.5rem;
			    background: -webkit-gradient(linear,center top,center bottom,from(#F7BA64),to(#ED8434));
			    border-radius: 8.333333rem;
			    font-size: 1.083333rem;
			    color: #fff;
			    text-align: center;
			    box-shadow: 0 0.166666rem 0.416666rem 0 #F8CAA7;
			}
			.scrollload-bottom{
				margin-top: 2rem;
			}
			.clearfix :after {clear:both;content:'.';display:block;width: 0;height: 0;visibility:hidden;} 
		</style>
	</head>

	<body>
		<div class="scrollload-containernew">
			<div id="content" class="scrollload-contentnew" style="overflow: hidden;">
				
			</div>
		</div>
	    <div id="warn" style="background: rgba(0, 0, 0, 0.7);text-align: center;border-radius: 0.25rem;color: #ffffff;position: fixed;z-index: 3000;top: 45%;left: 50%;width: 8em;margin-left: -4em;height: 3rem;line-height: 3rem;display: none;"></div>
	</body>
	</script>
</html>
<script src="js/out7.js" type="text/javascript" charset="utf-8"></script>
<script src="js/jquery-1.11.1.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/aui-toast.js" type="text/javascript" charset="utf-8"></script>
<script src="js/aui-dialog.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
		document.writeln("<script type=\"text/javascript\" src=\"js/common.js?"+ Math.random() + "\"></scr"+"ipt>");
</script>
<script id="transfer_tem" type="text/html">
	<div class="col-xs-12" align="center" style="float: none;">
		<img src="{{data.headimg | addFaceUrl}}" alt="" style="width: 9rem;height: 9rem;padding: 1rem;border-radius: 100%;"/>
		<p style="color: #282828;font-size: 1.25rem;font-weight: bold;margin-bottom: 5px;">{{data.nickname}}</p>
		<p style="color: #282828; font-size: 1.08rem;line-height:1.6666rem;text-align: left;padding-bottom: 1.67rem;">{{data.signature}}</p>
	</div>
	<div style="width: 100%;height:.83rem;background: #F8F8F8;"></div>
	<p style="color: #282828;font-size:1.5rem;font-weight: bold;padding-top: 2.08rem;margin-bottom: 0;padding-left: 15px;">{{job}}了{{data.book_count}}本书</p>
</script>
<script id="newbook_tem" type="html/javascript">
		{{each data.book_list}}
			<div class=" bookdetail" data-bookid={{$value.bookid}} data-videoauthorid={{$value.videoauthorid}} data-copywriter={{$value.copywriter}} data-bookname={{$value.bookname}} data-bookimg={{$value.bookimg}} data-bookrecommend={{$value.bookrecommend}} style="min-height: 12rem;height:auto;width:100%;padding:1rem 1.5rem 3rem 1.5rem;margin-top:2.2rem;">
			    <div class="col-xs-4" style="height:12rem;width: 29.3333%;padding:0rem;">
			        <a href="javascript:void(0)" style="display:block;height: 100%;position:relative;">
			            <img src="{{$value.bookimg | addUrl}}" style="width:9.17rem;height:100%;box-shadow: 3px 3px 3px #e6e6e6;border: 0;vertical-align: middle;">
					    <em style="position: absolute;display: block;width: 1.5rem;height: 1.5rem;bottom: 0.5rem;right: 1.6rem;background: url(icon/listen.png) center center no-repeat;background-size: 100%;"></em>
			        </a>
			    </div>
			    <div class="col-xs-8" style="padding:0;position:relative;left:1.2rem;margin: 0;height:12rem;width: 68.666%;">
			        <div class="col-xs-12" style="padding: 0;margin: 0;">
			            <p class="aui-ellipsis-1" style="font-family: bolder;font-size: 16px;color: #282828">{{$value.bookname}}</p>
			            <p class="aui-ellipsis-2" style="font-size: 13px;color: #666666;">{{$value.bookrecommend}}</p>
			        </div>
			        <div class="col-xs-7" style="position:absolute;bottom:0;padding: 0;margin-top: 1rem;">
			            <p style="font-size: 12px;color: #999999;margin: 0;">{{$value.videoduration}}</p>
			            
			        </div>
			        {{if userVip.type==1||$value.isorder==1}}
			        <div class="buy" data-isorder="{{$value.isorder}}" data-bookid={{$value.bookid}} style="position: absolute;right: 0.5rem;bottom: 0.5rem;width: 7.8rem;height:2.5rem;background-image: linear-gradient(-179deg, #F7BA64 0%, #fbd454 100%);box-shadow: 0 2px 5px 0 #F8CAA7;border-radius: 100px;text-align: center;color: #333333;font-weight: bold; font-size:1.4rem; line-height: 2.7rem;">
			       			开始听书
			        </div>
			        {{else}}
					<div style="position: absolute;right: 0.5rem;bottom: 0.2rem;width: 7.8rem;height:1.5rem;font-size: 1.4rem; font-weight: bold; text-align: center;color: #ED8434;">
						{{"¥ " + $value.bookprice}}
					</div>
			        {{/if}}
			    </div>
			</div>
		{{/each}}
</script>

<script type="text/javascript">
	
	var toast = new auiToast();
	var type = GetQueryString('type');
	var totalpage = null;
		  $(function(){
		  	function after(){
		  		toast.loading({
				    title:"加载中",
				    duration:2000
				});
			    $.ajax({
					type:"get",
					url:hostUrl+"user/userInfo?userid="+GetQueryString('authorId')+"&unionid="+unionid,
					async:true,
		//			dataType:"jsonp",
		//        	jsonp:"callback",
					success:function(data){
						data.userVip=userVip;
						var html = template("transfer_tem",data);
						document.getElementById('content').innerHTML = html;
						toast.hide();
						totalpage = Math.ceil(data.data.book_count/10)+1;
						
						var page =0 ;
						 var sc = new Scrollload({
						  		container: document.querySelector('.scrollload-containernew'),
				   				content: document.querySelector('.scrollload-contentnew'),
				   				noMoreDataHtml : '<div id="slogen" align="center" class="col-xs-12" style="padding-bottom: 3.75rem;padding-top:2rem;height: 1.17rem; width:92%;font-size:1.4rem;left:4%">'+
										slogenFont[rand(0,slogenFont.length)]+
									'</div>',
							    loadMore: function(sl) {
									page++;
							        if (page === totalpage) {
							          // 没有数据的时候需要调用noMoreData
							            sl.noMoreData()
							            return
							        }else{
							        	$.ajax({
											type:"get",
											url:hostUrl+"user/userInfo?userid="+GetQueryString('authorId')+"&unionid="+unionid+"&page="+page,
											async:true,
											success:function(data){
												data.userVip=userVip;
												var newbook = template("newbook_tem",data);
												document.getElementById('content').innerHTML += newbook;
												sl.unLock()
											}
										});
							        }
							        
				
							    },
							    // 你也可以关闭下拉刷新
							    enablePullRefresh: true,
							    pullRefresh: function (sl) {
							    	$.ajax({
										type:"get",
										url:hostUrl+"user/userInfo?userid="+GetQueryString('authorId')+"&unionid="+unionid,
										async:true,
										success:function(data){
											sl.refreshData();
											page = 1;
											$("#content .bookdetail").remove();
											data.userVip=userVip;
											var newbook = template("newbook_tem",data);
											document.getElementById('content').innerHTML += newbook;
											sl.unLock()
										}
									});
							        sl.refreshComplete()
							    }
							})
					}
				});
				 
		  	}
		  	
		  	getToken(after);
			
			
			
			$("#content").on('click','.bookdetail',function(){
				window.location.href = "bookDetail.html?bookid="+$(this).attr('data-bookid')+"&videoauthorid="+$(this).attr('data-videoauthorid')+"&copywriter="+$(this).attr('data-copywriter');
			})
			//分享的弹出
			
			$("title").html(type == "0" ? "蜜读特约撰稿人" : "音频转述师");
			template.defaults.imports.job = type == "0" ? "共精编" : "共讲述"
			
			
			$("#content").on('click','.buy',function(e){
				e.stopPropagation()
				var parent=$(this).parents('.bookdetail')
				location.href = "chapter.html?bookid=" + parent.attr('data-bookid') + "&videoauthorid=" + parent.attr('data-videoauthorid') + "&copywriter=" + parent.attr('data-copywriter') + "&bookname="+parent.attr('data-bookname')+"&bookimg=" + parent.attr('data-bookimg');
				return;
				if($(this).attr('data-isorder')=="0"){
					e.stopPropagation();
					bookId = $(this).attr('data-bookid'); 
					payClick(JSON.parse(window.sessionStorage.getItem("weixinData")),2,bookId,false);
				}else{
					return;
				}
			})
		  	
		  	
		 
		  })
		
		  
		 
		 

	




		
</script>